<script>
let categoryComponent = {
    template: `
      <div style="width: 100%">
        <el-row>
            <el-button v-if="categoryType == 1" type="primary" size="small" round>收入分类</el-button>
            <el-button v-if="categoryType != 1" type="default" size="small" round @click="setCategoryType(1)">收入分类</el-button>
            <el-button v-if="categoryType == 2" type="primary" size="small" round>支出分类</el-button>
            <el-button v-if="categoryType != 2" type="default" size="small" round @click="setCategoryType(2)">支出分类</el-button>

            <span class="frBtn" style="">
            <img src="/static/images/daoru.png" style="margin-right: 10px;width:20px;height: 20px" @click="exportData()" />
            <img src="/static/images/daochu.png" style="margin-right: 10px;width:20px;height: 20px" @click="upload()" />
            <el-button v-if="currentTally.role!='viewer'" type="primary" size="mini" @click="addCate" class="frBtn"><i class="el-icon-plus" /> 新增分类</el-button>
            </span>
        </el-row>
        <div class="clearfix" style="margin-top: 10px;"></div>
        <div>
        <template>
            <el-table
                    :data="categoryList"
                    type="index"
                    stripe
                    border
                    row-key="id"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                    default-expand-all
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="类别名称" sortable>
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="类型" sortable>
                    <template slot-scope="scope">
                        {{ scope.row.type == 1 ? "收入" : "支出" }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" v-if="currentTally.role!='viewer'">
                    <template slot-scope="scope">
                        <el-button type="primary" v-if="scope.row.is_sys!=1" size="mini" icon="el-icon-edit" circle @click="editCategory(scope.row)"></el-button>
                        <el-button type="danger" v-if="scope.row.is_sys!=1" size="mini" icon="el-icon-delete" circle @click="deleteCategoryRow(scope.$index, categoryList,scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        </div>

    <div>
    <!--分类编辑表单框------>
    <category-form :dialogShow="categoryDialog" :category-list-for-type="categoryList" :categoryType="categoryType" :formRow="categoryForm" @modalClose="modalClose"></category-form>

    <export-dialog :type="categoryType" :dialogShow="exportDialog" @modalCloseq="modalExportDialogClose" :downloadUrl="'https://static.gongsizhang.com/muban/category_export.xlsx'" :uploadUrl="'/api/category/import-data'"></export-dialog>

</div>
    `,
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally () {
            return this.$store.state.currentTally
        },
        categoryListIn() {
            return this.$store.state.categoryListIn
        },
        categoryListOut() {
            return this.$store.state.categoryListOut
        },
        categoryList() {
            if(this.categoryType===1) return this.categoryListIn
            if(this.categoryType===2) return  this.categoryListOut
        }
    },
    data:function(){
        return {
            categoryType:1,
            categoryForm:{},
            categoryDialog:false,
            exportDialog:false,
            categoryRules:{
                title: [
                    { required: true, message: '请输入类别名称', trigger: 'blur' }
                ],
            },
        }
    },
    methods:{
        modalExportDialogClose(){
          this.exportDialog = false;
          let that = this;
            that.$store.dispatch('getCategoryListBase', {
                tallyId: that.currentTallyId,
                cateType: that.categoryType
            })
        },
        setCategoryType(type){
            this.categoryType = type
        },
        modalClose(){
          this.categoryDialog = false
        },
        editCategory(row){
            this.categoryForm = JSON.parse(JSON.stringify(row))
            this.categoryDialog = true
        },
        addCate(){
            this.categoryDialog = true
            this.categoryForm = {};
        },
        upload(){
          this.exportDialog = true
        },
        exportData(){
            let that = this
            axios.get('/api/category/export',{
                method: 'get',
                headers: {'token': loginToken},
                params: {
                    tally_id:that.currentTallyId,
                    type:that.categoryType
                }
            }).then(function(res) {
                if(res.data.status === 'success'){
                    let filepath = res.data.data.filepath
                    let a = document.createElement('a');
                    a.target = "_blank";
                    a.href = filepath;
                    a.click();
                    console.log(res.data)
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
        deleteCategoryRow(index,rows,row){
            let that = this
            let sonStr = '';
            if(row.children ) {
                sonStr = '该分类存在下级分类，会一块删除';
            }
            this.$confirm('确定要删除该行：'+ row.title+" "+sonStr, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if(action === 'confirm') {
                        let postUrl = '/api/category/del'
                        axios.post(postUrl,{
                            id:row.id,
                            tally_id:that.currentTallyId
                        },{
                            headers: {'token': loginToken},
                        }).then(function(res) {
                            if(res.data.status === 'success'){
                                that.$message({
                                    type: 'success',
                                    message: '操作成功~'
                                });
                                that.$store.dispatch('getCategoryListBase', {
                                    tallyId: that.currentTallyId,
                                    cateType: that.categoryType
                                })
                            }else{
                                that.$message({
                                    type: 'error',
                                    message: '解析数据失败:'+res.data.error_message
                                })
                            }
                        })
                    }
                }
            });
        },
    }
}
</script>
